<template>
  <div class="cxx-page">
    <div style="display: flex;align-items: center;justify-content: flex-end;">
      <el-button @click="goback()" size="mini" type="primary">返回</el-button>
    </div>
    <el-table
      style="margin-top: 40px;"
      :data="[couponInfo]"
      border
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <el-table-column
        prop="couponSeq"
        label="优惠券编码"
        header-align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="couponName"
        label="优惠券名称"
        header-align="center"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="couponMoney"
        align="right"
        label="优惠券面值(元)"
        header-align="center"
        width="140"
      >
      </el-table-column>
      <el-table-column
        prop="joinStoreNum"
        align="right"
        label="参与门店数量"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.joinStoreNum || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        min-width="220"
        header-align="center"
      ></el-table-column>
      <el-table-column
        prop="couponConvertNum"
        align="right"
        label="已兑换数量"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.couponConvertNum || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="couponUseNum"
        align="right"
        label="已使用数量"
        header-align="center"
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.couponUseNum || 0 }}
        </template>
      </el-table-column>
    </el-table>
    <div class="cxx-line"></div>
    <el-form
      :inline="true"
      :model="formInline"
      style="display: flex;align-items: flex-end;justify-content: space-between;"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="店铺授权码" class="cxx-form-item">
            <el-input v-model="formInline.authCode" placeholder="店铺授权码">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="店铺名称" class="cxx-form-item">
            <el-input v-model="formInline.storeName" placeholder="店铺名称">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="大区" class="cxx-form-item">
            <el-select
              v-model="formInline.upOrgSeq"
              placeholder="所属大区"
              clearable
              filterable
              @change="selCore(formInline.upOrgSeq)"
            >
              <el-option
                v-for="item in corpList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="营销区域" class="cxx-form-item">
            <el-select
              v-model="formInline.baseCode"
              placeholder="所属营销区域"
              clearable
              filterable
              @change="selbase(formInline.baseCode)"
            >
              <el-option
                v-for="item in RentalPayWay"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="8">
        <el-form-item
          style="display: flex;align-items: flex-end;justify-content: flex-end;"
        >
          <el-button
            @click="exportToo"
            style="margin-top: 0px;"
            size="mini"
            type="success"
            icon="el-icon-s-data"
            :loading="exportLoading"
            >导出</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
            size="mini"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
          >
            清空
          </el-button>
        </el-form-item>
      </el-col>
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      height="400"
      style="width: 100%;height:500px"
      :header-cell-style="{ background: '#ebecf0', color: '#606266' }"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="upOrgZone"
        label="大区"
        header-align="center"
        min-width="220"
      ></el-table-column>
      <el-table-column
        prop="baseName"
        label="营销区域"
        header-align="center"
        min-width="220"
      ></el-table-column>
      <el-table-column
        prop="authCode"
        label="店铺授权码"
        header-align="center"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="storeName"
        label="店铺名称"
        header-align="center"
        min-width="220"
      ></el-table-column>
      <el-table-column
        prop="couponUseNum"
        align="right"
        label="已使用数量"
        header-align="center"
        width="220"
      >
        <template slot-scope="scope">
          {{ scope.row.couponUseNum || 0 }}
        </template>
      </el-table-column>
    </el-table>

    <div class="cxx-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getAllZone, getAllBase, getAllShop } from '@/api/addShopapply.js';

import {
  queryActivityStoreDetailById,
  queryActivityStoreDetailByIdExcel,
} from '@/api/goujiuCouponUseList';

export default {
  data() {
    return {
      total: 0,
      loading: false,
      tableData: null,
      tableDataExcel: null,
      exportLoading: false,
      RentalPayWay: null,
      corpList: null,
      couponInfo: null,
      formInline: {
        authCode: undefined, //店铺授权编码
        storeName: undefined, //店铺名称
        upOrgSeq: undefined,
        baseCode: undefined, //营销区域编码
      },
      listQuery: {
        current: 1,
        size: 10,
      },
    };
  },
  created() {
    console.log(this.$route);
    this.couponInfo = this.$route.params.couponInfo;
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    this.orgList = JSON.parse(this.logininfo).orgList;
    if (this.orgList[0].orgType == 4) {
      this.formInline.orgSeq = this.orgList[0].orgSeq;
    }

    this.orgSeq = this.orgList[0].orgSeq;
    this.formInline.userType = JSON.parse(this.logininfo).userType;
    this.userType =
      this.formInline.userType !== '4' && this.formInline.userType !== '5';
    this.userType2 = this.formInline.userType == '2' ? false : true;
    if (this.userType2 == false) {
      this.selCore(this.orgSeq);
      this.formInline.zqOrgSeq = this.orgSeq;
    }
    this._getAllZone();
    this.getPageList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getPageList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getPageList();
    },
    search() {
      this.listQuery.current = 1;
      this.getPageList();
    },
    kong() {
      this.formInline = {
        authCode: undefined, //店铺授权编码
        storeName: undefined, //店铺名称
        upOrgSeq: undefined,
        baseCode: undefined, //营销区域编码
      };
    },
    getPageList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponId: this.couponInfo.couponId,
          activityId: this.couponInfo.activityId,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
        },
        ascs: [],
        descs: [],
      };
      queryActivityStoreDetailById(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },

    exportToo() {
      this.exportLoading = true;
      let data = {
        size: this.total,
        current: 1,
        condition: {
          couponId: this.couponInfo.couponId,
          activityId: this.couponInfo.activityId,
          authCode: this.formInline.authCode,
          storeName: this.formInline.storeName,
        },
      };

      queryActivityStoreDetailByIdExcel(data).then((res) => {
        const link = document.createElement('a');
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel',
        });
        link.style.display = 'none';
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = '购酒券使用记录表.xlsx';
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
        this.exportLoading = false;
      });
    },

    goback() {
      this.$router.go('-1');
    },
    _getAllZone() {
      let data = {};
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },
    selCore(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
        let data = {
          code: value,
        };
        getAllBase(data).then((res) => {
          this.RentalPayWay = res.result;
          this.formInline.baseCode = '';
        });
      } else if (this.formInline.baseCode != '') {
        this.orgSeq = this.formInline.baseCode;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).baseCode;
      }
    },
    selbase(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
      } else if (this.formInline.zqOrgSeq != '') {
        this.orgSeq = this.formInline.zqOrgSeq;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
      console.log(this.formInline);
    },
  },
};
</script>

<style scoped>
.cxx-page {
  padding: 10px 40px;
  box-sizing: border-box;
  height: calc(100vh - 200px);
}

.cxx-line {
  width: 100%;
  height: 1px;
  background: #cccccc;
  margin: 20px 0;
}

.cxx-form-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.cxx-block {
  margin-top: 10px;
}
</style>
